/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use 'sass:map';
@use '../internal/styles' as styles;
@use '../button/constants' as constants;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles/foundation' as foundation;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

$default-background: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-segment-default);
$default-color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-segment-default);
$hover-background: var(#{custom-props.$styleBackgroundHover}, awsui.$color-background-segment-hover);
$hover-color: var(#{custom-props.$styleColorHover}, awsui.$color-text-segment-hover);
$disabled-background: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-segment-disabled);
$disabled-color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-interactive-disabled);
$selected-background: var(#{custom-props.$styleBackgroundActive}, awsui.$color-background-segment-active);
$selected-color: var(#{custom-props.$styleColorActive}, awsui.$color-text-segment-active);
$segment-gap: awsui.$space-static-xxs;
$segment-divider-width: 1px;

.segment {
  @include styles.font-body-m;
  @include styles.text-flex-wrapping;
  @include styles.font-button;
  letter-spacing: 0.25px;
  padding-block: styles.$control-padding-vertical;
  padding-inline: calc(awsui.$space-button-horizontal - $segment-gap);

  background: $default-background;
  color: $default-color;
  overflow: visible;

  border-start-start-radius: awsui.$border-radius-button;
  border-start-end-radius: awsui.$border-radius-button;
  border-end-start-radius: awsui.$border-radius-button;
  border-end-end-radius: awsui.$border-radius-button;

  position: relative;
  block-size: calc(100% - $segment-gap);
  display: flex;
  align-items: center;

  border-inline: none;
  border-block: none;

  &:not(.refresh) {
    block-size: calc(100% - $segment-gap - (2 * awsui.$border-width-field));
  }

  &:focus {
    outline: none;
  }

  &.disabled {
    background: $disabled-background;
    color: $disabled-color;
  }

  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);

  @include focus-visible.when-visible {
    @include styles.focus-highlight(
      $gutter: awsui.$space-segmented-control-focus-outline-gutter,
      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow}),
      $z-index: 1 // Prevents adjacent segments from overlapping the focus ring
    );
  }

  &:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-end: calc(-1 * ($segment-gap + $segment-divider-width));
    block-size: calc(100% - (($segment-gap + awsui.$space-static-xxxs) * 2));
    min-block-size: calc(awsui.$line-height-body-m - $segment-gap * 2);
    inline-size: $segment-divider-width;
    background: awsui.$color-border-input-default;
    z-index: 1;
  }
  &:not(.refresh):not(:last-child)::after {
    inset-inline-end: calc(-1 * $segment-gap);
  }

  @for $i from 1 through 6 {
    &:nth-child(#{$i}) {
      grid-column: $i;
    }
  }

  &.selected {
    background: $selected-background;
    color: $selected-color;
  }

  &:hover:not(.selected):not(.disabled):not(:focus) {
    background: $hover-background;
    color: $hover-color;
    cursor: pointer;
  }
}

.icon {
  /* used in test-utils */
}

.with-text {
  position: relative;
  inset-inline-start: calc(-1 * #{awsui.$space-xxs});
  margin-inline-end: awsui.$space-xxs;
}

.with-no-text {
  margin-inline: auto;
  inset-inline: 0;
}
